 <template>
	 <view class="containar">
		<view class="avatarUrl">
			<button size="default"
				    type="balanced"
					open-type="chooseAvatar"
					@chooseavatar="onChooseavatar">
				<image :src="currentUser.avatarUrl" class="refreshIcon"></image>
			</button>
		</view>
		
		<view class="userName">
			<text>昵称：</text>
			<!-- <text>{{ currentUser.userName }}</text> -->
			<input :clearable="false" type="nickname" class="weui-input" :value="userName" @blur="bindblur"
				placeholder="请输入昵称" @input="bindinput" style="width: 50%;"/>
		</view>
	 	
	 
	 	<view style="width: 100%;height: 1px; background: #EEE;">
	 
	 	</view>
	 	<view style="width: 700rpx; height: 20px; font-size: 13px; margin: auto; margin-top: 60rpx;">
	 		· 点击头像和昵称,将申请获取以下权限
	 	</view>
	 	<view style="width: 700rpx; height: 20px; font-size: 13px; margin: auto; color: #cbcbcb; margin-top: 25rpx;">
	 		· 获得你的信息(昵称、头像等)
	 	</view>
		
		<!-- <button size="default" type="primary"
			    open-type="getAuthorize"
			    scope="phoneNumber"
			    @getAuthorize="getPhoneNumber"
			    @error="getInfoError">
			获取手机号码
		</button> -->
		
		<button size="default" type="primary" @click="onSubmit" style="border-radius: 20px;margin-top: 36px;">
			保存登录
		</button> 
	 </view>
</template>
 
<script>
	export default {
		data() {
			return {
				currentUser: {
					uuid: '',
					avatarUrl: 'https://gd-hbimg.huaban.com/010231a46192438576a025cc43faf1c484517d6f9112-Xu8UrF_fw480webp', // 替换为默认头像路径
					userName: '未登录',
				},
			};
		},
		onLoad() {
			// 设置文字标题
			// uni.setNavigationBarTitle({
			// 	title: '返回'
			// });
			// uni.setNavigationBarColor({
			// 	frontColor: '#000000',
			// 	backgroundColor: '#ffffff'
			// })
		},
		methods: {
			//昵称输入框聚焦触发
			bindblur(e) {
				this.currentUser.userName = e.detail.value; // 获取微信昵称
			},
			//昵称输入框输入触发
			bindinput(e) {
				this.currentUser.userName = e.detail.value; // 获取微信昵称
			},
			//微信button自带的选择头像的方法，不知道何年何月可能又会改
			onChooseavatar(e) {
				let {avatarUrl} = e.detail;
				this.currentUser.avatarUrl = avatarUrl
			},
			onSubmit() {
				// 判断头像以及昵称不为空 再登陆成功
				if (this.currentUser.userName !== '未登录' && this.currentUser.avatarUrl !== 'https://gd-hbimg.huaban.com/010231a46192438576a025cc43faf1c484517d6f9112-Xu8UrF_fw480webp') {
					//保存登陆返回的用户头像姓名信息
					this.save()
					
					//前面是获取用户信息，现在执行正式登录逻辑
					// this.login()
					
					//一切搞定之后，返回“我的页面”
					uni.navigateBack({
						delta: 1
					})		
				} else {
					uni.showToast({
						title: '未授权头像昵称',
						icon: 'error',
						duration: 2000 // 显示时长
					});
				}
			},
			
			
			//保存图片和登录用户的信息
			save() {
				uni.showLoading({
					title: '加载中'
				});
			
				// 使用 uni.setStorageSync 方法将登陆的用户信息保存到本地存储中
				uni.setStorageSync('currentUser',this.currentUser)
			},
			
			
			// 支付宝小程序的登录逻辑
			// getOpenUserInfo() {
			// 	uni.getOpenUserInfo({
			// 		success: (res) => {
			// 			let userInfo = JSON.parse(res.response).response
			// 			console.log(userInfo.avatar)
			// 			console.log(userInfo.nickName)
						
			// 			let currentUser = {
			// 				uuid: '',
			// 				password: '',
			// 				avatar: userInfo.avatar, // 替换为授权后获取到的用户头像
			// 				userName: userInfo.nickName,	// 替换为授权后获取到的用户昵称
			// 				dataList: [
			// 					{ name: 'id', value: 'czm2774282827'},
			// 					{ name: '姓名', value: '岑梓铭'},
			// 					{ name: '性别', value: '男'},
			// 					{ name: '邮箱', value: '2774282827@qq.com'},
			// 				]
			// 			}
			// 			this.currentUser = currentUser
			// 		},
			// 		fail: (err) => {
			// 			console.log(err)
			// 		}
			// 	});
			// },
			// getPhoneNumber() {
			// 	uni.getPhoneNumber({
			// 		success: (res) => {
			// 			let encryptedData = JSON.parse(res.response).response
			// 			console.log("手机信息",encryptedData);
			// 			this.currentUser.phone = encryptedData.phoneNumber
			// 			// uni.request({
			// 			//   //你的服务器地址
			// 			//   url: 'https://xxxxxxx',
			// 			//   data: encryptedData,
			// 			// });
			// 		},
			// 		fail: (res) => {
			// 			console.log(res);
			// 		},
			// 	});
			// },
			// getAuthCode() {
			// 	if(this.currentUser.avatar !== 'https://gd-hbimg.huaban.com/010231a46192438576a025cc43faf1c484517d6f9112-Xu8UrF_fw480webp' || this.currentUser.userName !== '未登录'){
			// 		let that = this
			// 		uni.setStorageSync('currentUser', this.currentUser)
			// 		uni.getAuthCode({
			// 			scopes: 'auth_base', // 主动授权：auth_user，静默授权：auth_base。或者其它scope,auth_base
			// 			success: (res) => {
			// 				if (res.authCode) {
			// 					// 认证成功
			// 					console.log("打印authCode")
			// 					console.log(res)
								
			// 					// 保存起来
			// 					this.currentUser.authCode = res.authCode
			// 					uni.setStorageSync('currentUser', this.currentUser)
			// 					// 显示加载框
			// 					uni.showLoading({ title: '登录中...' });
			// 					setTimeout(() => {
			// 						uni.hideLoading()
			// 						uni.showToast({
			// 							title: '登录成功',
			// 							icon: 'success',
			// 							duration: 2000 // 显示时长
			// 						});
									
			// 						// 返回
			// 						uni.navigateTo({
			// 							url: '../AiChat/AiChat'
			// 						})
			// 					}, 1000)
			// 					// 调用自己的服务端接口，让服务端进行后端的授权认证，并且利用session，需要解决跨域问题
			// 					// this.$request('user/zfb/login', 'POST', {
			// 					// 	code: res.authCode,
			// 					// 	grantType: "authorization_code"
			// 					// }).then(res => {
			// 					// 	console.log(res)
			// 					// 	console.log("接口请求成功", res);
			// 					// 	// 压入token
			// 					// 	uni.setStorageSync('token', res.token);
			// 					// 	// 压入opneid
			// 					// 	uni.setStorageSync('openid', res.openid);
			// 					// 	console.log(res)
			// 					// 	// 挂载websoket实例
			// 					// 	this.loginSuccessCallback()
			// 					// 	// 跳转页面
			// 					// 	that.$goBack(3,'/pages/my/my')
			// 					// })
			// 				}
			// 			},
			// 		});
			// 	 } else {
			// 		uni.showToast({
			// 			title: '还未授权获取用户头像和昵称',
			// 			// icon: 'success',
			// 			duration: 2000 // 显示时长
			// 		});
			// 	 }
				
			// },
			// 授权失败回调
			getInfoError() {
				uni.showToast({
					title: "取消授权个人信息"
				});
			},
		}
	};
</script>
 
<style lang="scss" scoped>
	.containar {
		width: 100vw;
		height: 100vh;
		background: #fff;
		box-sizing: border-box;
		padding: 0 30rpx;

		.avatarUrl {
			padding: 1.8rem 0 40rpx;
			background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				border: none !important;
				width: auto;
				// padding: 20rpx 30rpx;
				margin: 0;
				display: flex;
				border: none;
				justify-content: center;
				align-items: center;

				&::after {
					border: none;
				}

				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.userName {
			min-width: 290rpx;
			padding-left: 140rpx;
			margin: auto;
			margin-bottom: 40rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			.weui-input {
				padding-left: 10rpx;
			}
		}

		.btn {
			margin-top: 60rpx;
		}
	}
</style>